<template>
  <div class="qyyb_box">
    <header-comm></header-comm>
    <div class="header_sele" :style="$parent.$parent.collapsed==false?'left: 10%':'left:80px'">
      <div class="check">
        <div>
          <a-checkbox-group :options="plainOptions" v-model="checkedList" @change="myChange" />
        </div>
      </div>

      <div class="sele">
        <span>客户：</span>
        <a-input placeholder="请输入客户名称" style="width: 200px" @change="onSearch" />
        <a-icon type="search" class="search" />
      </div>
    </div>
    <!-- 表格-================= -->
    <div class="bcg">
      <div class="qqyb_bg appstyle">
        <div class="add_qy">
          <div class="add_in">
            客户名称：
            <a-select
              showSearch
              :value="khvalue"
              placeholder="客户名称"
              style="width: 200px"
              :defaultActiveFirstOption="false"
              :showArrow="false"
              :filterOption="false"
              @search="khmcSearch"
              @change="khmcChange"
              :notFoundContent="null"
            >
              <a-select-option
                v-for="(item,i) in dataSource"
                :key="i"
                :value="item.GSMC"
              >{{item.GSMC}}</a-select-option>
            </a-select>
          </div>
          <div class="add_in">
            语言版本：
            <a-checkbox-group v-model="cn" @change="CnChange">
              <a-checkbox value="1">中文</a-checkbox>
            </a-checkbox-group>

            <a-checkbox-group @change="EnChange">
              <a-checkbox value="1">英文</a-checkbox>
            </a-checkbox-group>
            <a-checkbox-group @change="DwChange">
              <a-checkbox value="1">德语</a-checkbox>
            </a-checkbox-group>
            <a-checkbox-group @change="JaChange">
              <a-checkbox value="1">日文</a-checkbox>
            </a-checkbox-group>
            <a-checkbox-group @change="RuChange">
              <a-checkbox value="1">俄文</a-checkbox>
            </a-checkbox-group>
          </div>

          <div class="add_in">
            <a-button type="primary" @click="addyblist">新增样本</a-button>
          </div>
        </div>
        <a-table
          @change="handleChangelist"
          :loading="loading"
          :columns="columns"
          :pagination="pagination"
          :dataSource="data"
          :scroll="{ x: 1900}"
          bordered
        >
          <template
            v-for="titletext in ['Cn', 'En', 'Gm','Jp','Rl']"
            :slot="titletext"
            slot-scope="text, record, index"
          >
            <div :key="titletext">
              <a-switch
                v-if="titletext=='Cn'"
                :defaultChecked="data[index].cnshow==0?false:true"
                @change="onChangeSwit(index,record,record.cnshow,'Cn')"
              />

              <a-switch
                v-if="titletext=='En'"
                :defaultChecked="data[index].enshow==0?false:true"
                @change="EnSwit(index, record,record.enshow, 'En')"
              />

              <a-button
                class="fybtn"
                type="primary"
                size="small"
                v-if="titletext=='En'&&data[index].enshow!=0"
                @click="fysub(1,record.filename,record)"
              >翻译</a-button>

              <a-switch
                v-if="titletext=='Gm'"
                :defaultChecked="data[index].dwshow==0?false:true"
                @change="GmSwit(index,record, record.dwshow,'Gm')"
              />
              <a-button
                class="fybtn"
                type="primary"
                size="small"
                v-if="titletext=='Gm'&&data[index].dwshow!=0"
                @click="fysub(2,record.filename)"
              >翻译</a-button>

              <a-switch
                v-if="titletext=='Jp'"
                :defaultChecked="data[index].jashow==0?false:true"
                @change="JpSwit(index,record, record.jashow,'Jp')"
              />
              <a-button
                class="fybtn"
                type="primary"
                size="small"
                :data-id="data[index].jashow"
                v-if="titletext=='Jp'&&data[index].jashow!=0"
                @click="fysub(3,record.filename)"
              >翻译</a-button>

              <a-switch
                v-if="titletext=='Rl'"
                :defaultChecked="data[index].rushow==0?false:true"
                @change="RlSwit(index,record, record.rushow,'Rl')"
              />
              <a-button
                class="fybtn"
                type="primary"
                size="small"
                v-if="titletext=='Rl'&&data[index].rushow!=0"
                @click="fysub(4,record.filename)"
              >翻译</a-button>
            </div>
          </template>
          <template slot="brand" slot-scope="text, record, index">
            <div>
              <a-input
                size="small"
                v-model="record.brand"
                placeholder="请输入品牌"
                allowClear
                @change="onChangebrand(record)"
              />
            </div>
          </template>
          <template slot="sort" slot-scope="text, record, index">
            <div>
              <a-input size="small" v-model="record.sort" allowClear @change="sortchange(record)" />
            </div>
          </template>
          <template slot="recommend" slot-scope="text, record, index">
            <div>
              <a-switch
                :defaultChecked="record.recommend==0?false:true"
                @change="recommendSwit(index,record, record.recommend)"
              />
            </div>
          </template>

          <template slot="logo" slot-scope="text, record, index">
            <div>
             
              <div class="logo_box" >
                
                <img v-if="record.logo!=null&&record.logo!=''" :src="record.logo" alt />
           <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
                  <img alt="example" style="width: 100%" :src="previewImage" />
                </a-modal>

                  <span class="log_zz" >
                  <a-icon @click="handlePreview(record.logo)" class="zoom_ico" type="zoom-in" />

                  <a-icon @click="removelist(index)" class="del_ico" type="delete" />

                </span>
              </div>
              <a-upload
                v-if="record.logo==null||record.logo==''?true:false"
                :data-index="index"
                action="https://vip.bearing.cn"
                listType="picture-card"
                :default-file-list="fileList"
                :remove="removelist"
                @preview="handlePreview"
                @change="handleChange"
               @click="handleclick(index)"
                accept=".jpg, .png"
              >
                <div class="upbox" @click="handleclick(index)">
                  <a-icon type="plus" />

                  <div class="ant-upload-text"></div>
                </div>
              </a-upload>
              <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
                <img alt="example" style="width: 100%" :src="previewImage" />
              </a-modal>
            </div>
          </template>
          <template slot="operation" slot-scope="text, record, index">
            <div class="editable-row-operations">
              <a class="del" @click="()=>toybgl(record)">样本</a>
              <a-popconfirm
                v-if="dataSource.length"
                title="确定提索引吗?"
                class="del"
                @confirm="() => getybindex(record)"
              >
                <a>提索引</a>
              </a-popconfirm>
              <a-popconfirm
                v-if="dataSource.length"
                title="确定删除吗?"
                class="del"
                @confirm="() => ybdelete(record.key)"
              >
                <a href="javascript:;">删除</a>
              </a-popconfirm>
            </div>
          </template>
        </a-table>
      </div>
    </div>
    <!-- 表格-================= -->
    <div class="fyloading" v-if="fyflag">
      <a-spin size="large" tip="正在翻译...">
        <!-- <div class="spin-content">
          正在翻译...,过程可能需要一段时间，请耐心等待一下
        </div>-->
      </a-spin>
    </div>

    <div class="fyloading" v-if="ybflag">
      <a-spin size="large" tip="正在提取索引...">
        <!-- <div class="spin-content">
          正在翻译...,过程可能需要一段时间，请耐心等待一下
        </div>-->
      </a-spin>
    </div>
  </div>
</template>

<script>
import qs from "qs";
import headerComm from "../header-comm/header.vue";
const columns = [
  {
    title: "客户ID",
    dataIndex: "sqdwid",
    fixed:'left',
    width:100
  },
  {
    title: "客户名称",
    dataIndex: "dwmc",
    fixed:'left',
    width:300


  },
  {
    title: "中文",
    dataIndex: "Cn",
    scopedSlots: { customRender: "Cn" }
  },
  ,
  {
    title: "英文",
    dataIndex: "En",
    scopedSlots: { customRender: "En" }
  },
  ,
  {
    title: "德语",
    dataIndex: "Gm",
    scopedSlots: { customRender: "Gm" }
  },
  ,
  {
    title: "日文",
    dataIndex: "Jp",
    scopedSlots: { customRender: "Jp" }
  },
  ,
  {
    title: "俄文",
    dataIndex: "Rl",
    scopedSlots: { customRender: "Rl" }
  },
  {
    title: "品牌",
    dataIndex: "brand",
    scopedSlots: { customRender: "brand" }
  },
  {
    title: "图片",
    dataIndex: "logo",
    scopedSlots: { customRender: "logo" }
  },
  {
    title: "排序",
    dataIndex: "sort",
    scopedSlots: { customRender: "sort" }
  },
  {
    title: "推荐品牌",
    dataIndex: "recommend",
    scopedSlots: { customRender: "recommend" }
  },

  {
    title: "操作",
    dataIndex: "operation",
    scopedSlots: { customRender: "operation" },
    // width: "15%",
    fixed: 'right'
  }
];

const data = [];
for (let i = 0; i < 100; i++) {
  data.push({
    key: i.toString(),
    name: `Edrward ${i}`,
    age: 32,
    address: `London Park no. ${i}`
  });
}
const plainOptions = ["贸易商", "生产厂", "其他类型"];
const defaultCheckedList = [];
export default {
  data() {
    this.cacheData = data.map(item => ({ ...item }));
    return {
      data,
      columns,
      cn: ["1"],
      sele: "",
      serchvalue: "",
      pagination: {
        defaultPageSize: 10,
        showTotal: total => `共 ${total} 条数据`,
        total: 0
      },
      previewVisible: false,
      previewImage: "",
      fileList: [],
      loading: true,
      datakh: [],
      dataSource: [],
      datakhId: "",
      khvalue: "",
      cnshow: "", //中文
      enshow: "", //英文
      dwshow: "", //德文
      jashow: "", //日文
      rushow: "", //俄文
      fyflag: false,
      ybflag: false,
      checkedList: defaultCheckedList,
      indeterminate: true,
      checkAll: false,
      plainOptions,
      logo_index: 0
    };
  },
  components: {
    headerComm
  },

  methods: {
    //搜索框
    onSearch(e) {
      this.serchvalue = e.target.value;
      var value = e.target.value;
      console.log(e.target.value);
      this.handleChangelist(this.pagination, value);
    },
    //上传logo--开始
    removelist(index) {
      console.log(index);
      this.fileList = [];
      this.data[index].logo = null;
      this.logo_index = index;
      this.uploadlogo();
      // this.uid = file.uid;
      // if (this.uid == 0 || this.uid == 1 || this.uid == 2) {
      //   this.$parent.xgvalue.splice(this.uid, 1);
      // }
    },
    handleCancel() {
      this.previewVisible = false;
    },
    handlePreview(file) {
      console.log(file)
      this.previewImage = file;
      this.previewVisible = true;
    },
    handleChange({ fileList }) {
      this.fileList = fileList;
      if (this.fileList.length) {
        this.data[this.logo_index].logo = this.fileList[0].thumbUrl;
      } else {
        this.data[this.logo_index].logo = null;
      }
      this.uploadlogo();

      console.log(fileList);
      console.log(this.data[this.logo_index]);
    },
    uploadlogo() {
      this.axios
        .post(
          "yangben/UpdateBrandImg.php",
          qs.stringify({
            id_num: this.data[this.logo_index].id,
            imageurl: this.data[this.logo_index].logo
          })
        )
        .then(res => {
          console.log(res);
          if (res.data.code == 303) {
            this.$notification["success"]({
              message: "成功",
              description: res.data.msg,
              duration: .5

            });
          } else {
            this.$notification["error"]({
              message: "失败",
              description: res.data.msg,
              duration: .5
            });
          }
        });
    },
    handleclick(index) {
      this.logo_index = index;
      console.log(index);
    },
    //上传logo--结束

    //改变品牌值
    onChangebrand(record) {
      console.log("navbar-brand", record);

      this.axios
        .post(
          "yangben/UpdateBrand.php",
          qs.stringify({
            id_num: record.id,
            brand: record.brand
          })
        )
        .then(res => {
          if (res.data.code == 303) {
            this.$notification["success"]({
              message: "保存成功",
              description: res.data.msg
            });
          } else {
            this.$notification["error"]({
              message: "失败",
              description: res.data.msg,
              duration: 1.5
            });
          }
        });
    },

    //提取样本索引
    getybindex(value) {
      this.ybflag = true;
      this.axios
        .post(
          "yangben/GetIndex.php",
          qs.stringify({
            filename: value.filename,
            brand: value.brand
          })
        )
        .then(res => {
          if (res.data.code == 303) {
            this.$notification["success"]({
              message: "保存成功",
              description: res.data.msg
            });
          } else {
            this.$notification["error"]({
              message: "失败",
              description: res.data.msg,
              duration: 1.5
            });
          }

          this.ybflag = false;
        });
    },
    //客户名称
    getkhmc(value) {
      this.axios
        .post("yangben/SelectYbGsmc.php", qs.stringify({ gsmc: value }))
        .then(res => {
          if (res.data.code == 303) {
            this.dataSource = res.data.result;
            if (res.data.result.length == 0) {
              this.dataSource = [];
            }
          }
        });
    },
    //客户名称查询
    khmcChange(value) {
      this.khvalue = value;
      for (var i = 0; i < this.dataSource.length; i++) {
        if (this.khvalue == this.dataSource[i].GSMC) {
          this.datakhId = this.dataSource[i].SQDWID;
        }
      }
      if (this.khvalue == "") {
        this.datakhId = "";
      }
    },
    khmcSearch(value) {
      this.getkhmc(value);
    },

    khmc(input, option) {
      return (
        option.componentOptions.children[0].text
          .toUpperCase()
          .indexOf(input.toUpperCase()) >= 0
      );
    },
    //语言版本
    CnChange(value) {
      if (value[0] == "1") {
        this.cnshow = "1";
      } else {
        this.cnshow = "";
      }
    },
    EnChange(value) {
      if (value[0] == "1") {
        this.enshow = "1";
      } else {
        this.enshow = "";
      }
    },
    DwChange(value) {
      if (value[0] == "1") {
        this.dwshow = "1";
      } else {
        this.dwshow = "";
      }
    },
    JaChange(value) {
      if (value[0] == "1") {
        this.jashow = "1";
      } else {
        this.jashow = "";
      }
    },
    RuChange(value) {
      if (value[0] == "1") {
        this.rushow = "1";
      } else {
        this.rushow = "";
      }
    },
    //翻译
    fysub(index, filename,value) {
      this.fyflag = true;
      console.log(index);
      console.log(value);
      this.axios
        .post(
          "yangben/TranslateAll.php",
          qs.stringify({
            lg: index,
            filename: filename,
           sqdwid :value.sqdwid
          })
        )
        .then(res => {
          console.log(res);
          if (res.data.code == 303) {
            this.fyflag = false;
            this.$notification["success"]({
              message: "翻译成功",
              description: res.data.msg
            });
          }
        });
    },
    //新增样本数据
    addyblist() {
      console.log(this.khvalue);
      this.axios
        .post(
          "yangben/AddYbData.php",
          qs.stringify({
            gsmc: this.khvalue,
            sqdwid: this.datakhId,
            cnshow: this.cnshow,
            enshow: this.enshow,
            dwshow: this.dwshow,
            jashow: this.jashow,
            rushow: this.rushow
          })
        )
        .then(res => {
          console.log(res);
          if (res.data.code == 303) {
            this.$notification["success"]({
              message: "成功",
              description: res.data.msg
            });
            this.handleChangelist(this.pagination);
          } else {
            this.$notification["error"]({
              message: "失败",
              description: res.data.msg
            });
          }
        });
    },

    //多选框
    myChange(checkedList) {
      this.indeterminate =
        !!checkedList.length && checkedList.length < plainOptions.length;
      this.checkAll = checkedList.length === plainOptions.length;
      console.log(this.checkedList);
      this.handleChangelist(this.pagination, this.checkedList);
    },
    //表格
    handleChangelist(pagination, khmc) {
      this.axios
        .post(
          "yangben/getYbList.php",
          qs.stringify({
            dwmc: this.serchvalue,
            page: pagination.current,
            pageSize: pagination.defaultPageSize
          })
        )
        .then(res => {
          console.log(res);
          if (res.data.code == 303) {
            this.pagination.total = Number(res.data.result.total);
            this.loading = false;
            this.cacheData = this.data.map(item => ({
              ...item
            }));
            for (var i = 0; i < res.data.result.data.length; i++) {
              res.data.result.data[i].key = res.data.result.data[i].id;
              if (res.data.result.data[i].logo != null) {
                res.data.result.data[i].logo = res.data.result.data[
                  i
                ].logo.trim();
              }
              // if (this.data[i].logo != null) {
              //   let ss = {
              //     uid: i,
              //     name: " ",
              //     status: "done",
              //     url: this.data[i].logo
              //   };
              //   this.fileList.push(ss);
              // }
            }
            this.data = res.data.result.data;
          } else {
            this.data = [];
          }
        });
      // if (target) {
      //   target[column] = value
      // this.data=newData
      // }
    },
    //开关

    onChangeSwit(index, value, record, text) {
      console.log(value);
      if (text == "Cn" && record == "1") {
        this.data[index].cnshow = "0";
      } else {
        this.data[index].cnshow = "1";
      }
      this.getyybb(value.sqdwid, "cnshow", this.data[index].cnshow);
    },
    EnSwit(index, value, record, text) {
      if (text == "En" && record == "1") {
        this.data[index].enshow = "0";
      } else {
        this.data[index].enshow = "1";
      }
      this.getyybb(value.sqdwid, "enshow", this.data[index].enshow);
    },
    GmSwit(index, value, record, text) {
      if (text == "Gm" && record == "1") {
        this.data[index].dwshow = "0";
      } else {
        this.data[index].dwshow = "1";
      }
      this.getyybb(value.sqdwid, "dwshow", this.data[index].dwshow);
    },
    JpSwit(index, value, record, text) {
      if (text == "Jp" && record == "1") {
        this.data[index].jashow = "0";
      } else {
        this.data[index].jashow = "1";
      }
      this.getyybb(value.sqdwid, "jashow", this.data[index].jashow);
    },
    RlSwit(index, value, record, text) {
      if (text == "Rl" && record == "1") {
        this.data[index].rushow = "0";
      } else {
        this.data[index].rushow = "1";
      }
      this.getyybb(value.sqdwid, "rushow", this.data[index].rushow);
    },
    recommendSwit(index, value, record, text) {
      if (value.recommend == "1") {
        this.data[index].recommend = "0";
      } else {
        this.data[index].recommend = "1";
      }
      this.axios
        .post(
          "yangben/UpdateRecommened.php",
          qs.stringify({
            id: value.id,
            isOpen: this.data[index].recommend
          })
        )
        .then(res => {
          console.log(res);
          if (res.data.code == 303) {
            this.$notification["success"]({
              message: "成功",
              description: res.data.msg
            });
          } else {
            this.$notification["error"]({
              message: "失败",
              description: res.data.msg
            });
          }
        });
    },
    sortchange(value) {
      this.axios
        .post(
          "yangben/UpdateSort.php",
          qs.stringify({
            id_num: value.id,
            sort: value.sort
          })
        )
        .then(res => {
          console.log(res);
          if (res.data.code == 303) {
            this.$notification["success"]({
              message: "成功",
              description: res.data.msg
            });
          } else {
            this.$notification["error"]({
              message: "失败",
              description: res.data.msg
            });
          }
        });
    },
    getyybb(ybId, lgType, isOpen) {
      this.axios
        .post(
          "yangben/UpdateYbList.php",
          qs.stringify({ id: ybId, lgType: lgType, isOpen: isOpen })
        )
        .then(res => {
          console.log(res);
          if (res.data.code == 303) {
            this.$notification["success"]({
              message: "成功",
              description: res.data.msg
            });
          } else {
            this.$notification["error"]({
              message: "失败",
              description: res.data.msg
            });
          }
        });
    },
    //删除客户列表
    ybdelete(key) {
      const dataSource = [...this.data];
      this.data = dataSource.filter(item => item.key !== key);
      this.axios
        .post("yangben/DeleteYblist.php", qs.stringify({ id: key }))
        .then(res => {
          console.log(res);
          if (res.data.code == 303) {
            this.$notification["success"]({
              message: "成功",
              description: res.data.msg
            });
          }
        });
    },
    toybgl(value) {
      this.$store.state.filename = value.filename;
      this.$store.state.dwmc = value.dwmc;
      this.$store.state.sqdwid = value.sqdwid;
      this.$router.push("/ybgl");
    }
  },

  created() {
    this.handleChangelist(this.pagination);
    this.getkhmc();
  }
};
</script>

<style lang='less' >
.qyyb_box {
  .header_sele {
    position: absolute;
    top: 55px;
    left: 200px;
    z-index: 999;
    text-align: right;
    width: 90%;
    background-color: #fff;
    box-shadow: 5px 5px 5px #ccc;
    // height: 50px;
    padding: 10px 20px;
    .sele {
      position: relative;
      display: inline-block;
      .search {
        position: absolute;
        top: 8px;
        right: 15px;
        font-size: 18px;
      }
    }
    .check {
      display: inline-block;
      margin-right: 30px;
    }
  }
  .ant-upload.ant-upload-select-picture-card {
    width: 40px;
    height: 38px;
    margin: 0;
  }
  .qqyb_bg {
    width: 80%;
    position: absolute;
    top: 117px !important;
    left: 250px;
    .ant-table-thead {
      background-color: #ccc !important;
    }
    .ant-table-tbody {
      background: #fff !important;
    }
    .add_qy {
      width: 100%;
      text-align: right;
      padding: 10px 0;
      height: 65px !important;
      background-color: #fff;
      margin: 10px 0;
      .ant-input {
        display: inline-block !important;
        width: 200px;
        height: 30px !important;
        font-size: 14px;
      }
      .add_in {
        display: inline-block;
        text-align: left;
        margin: 0 10px;
        .ant-btn {
          padding: 0 5px;
        }
      }
    }
    .ant-table-wrapper {
      background: #fff !important;
    }
  }
  .logo_box {
    position: relative;

    img {
      width: 55px;
    }
   
    .log_zz {
      position: absolute;
      z-index: 999;
      right:  0;
      top: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      display: none;
      i {
        position: absolute;
        font-size: 18px;
        color: #fff;
        margin-top: 2px;
        cursor: pointer;
            top: 32%;
      }
      .zoom_ico{
        left: 7px;
      }
      .del_ico{
        right: 7px;
      }
    }
   
    
  }
   .upbox{
      height: 100%;
      line-height: 36px;
    }
    .ant-input-affix-wrapper{
      width: 150px;
    }
    .ant-table-thead > tr > th, .ant-table-tbody > tr > td{
      height: 60px!important;
      overflow: hidden;
    }
  .ant-upload.ant-upload-select-picture-card > .ant-upload{
    padding: 0;
  }
  .ant-input-affix-wrapper .ant-input:not(:last-child){
        width: 150px;
  }
  .ant-upload-select-picture-card .ant-upload-text {
    margin: 0;
  }
  .ant-upload-select-picture-card i {
    font-size: 20px !important;
  }
  .logo_box:hover .log_zz {
    display: block;
  }
  .fybtn {
    width: 50px;
    vertical-align: middle;
    margin-left: 10px;
    margin-right: 10px;
  }
  // .ant-input-affix-wrapper{
  //   width: 50%;
  //   margin-right: 10px;
  // }
  .fyloading {
    position: absolute;
    width: 90% !important;
    border: 1px solid #91d5ff;
    background: rgba(255, 255, 255, 0.5);
    padding: 30px;
    height: 800px !important;
    z-index: 999999 !important;
    top: 108px;
    left: 10%;
    // opacity: .5!important;
    .ant-spin-blur {
      opacity: 1 !important;
    }
    .ant-spin-text {
      font-size: 18px !important;
    }
  }
  .ant-spin-nested-loading > div > .ant-spin {
    top: 100px !important;
  }
  .del {
    padding-right: 5px;
    color: #40a9ff;
    cursor: pointer;
  }
}
</style>
